<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 块级作用域: 指的就是以 { } 划分出来作用域

        // 使用var声明的变量不存在如下的块级作用域区分，内外都有效
        var a = 10;

        {
            var b = 20;
        }
        if(true){
            var c = 30;
        }

        for(var i = 0; i < 3; i++){
        }
        console.log(a,b,c,i); // 10 20 30 3


        // 使用let声明的变量, 只在当前块级作用域内有效，出来就找不到。
        // let的作用域链和var的声明一样
        var x = 10;
        {
            //console.log(x); //10
            let y = 20;
        }
        // console.log(y); // 不支持 y is not defined

        if(true){
            // console.log(x); //10
            let z = 30;
        }
        // console.log(z); // 不支持 z is not defined

        for(let j = 0; j < 3; j++){
            console.log(j);
        }
        console.log(j); // 不支持 j is not defined

    </script>
</body>
</html>